<script setup lang="ts">
import type { BannerItem } from '@/types/home';
import { ref } from 'vue'

const activeIndex = ref(0)
// 当 swiper 下标发生变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {
  // console.log(ev.detail?.current)
  activeIndex.value = ev.detail?.current || 0
}
// 定义 props 接收
defineProps<{
  list: BannerItem[]
}>()
</script>
<template>
  <view class="carousel">

    <!-- 轮播图 -->
    <swiper @change="onChange" :autoplay="true" :interval="3000" :circular="true">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" :src="item.imgUrl" class="image"></image>
        </navigator>
      </swiper-item>

    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text v-for="(item, index) in list" :key="item.id" class="dot" :class="{ active: index === activeIndex }"></text>
    </view>



  </view>

</template>
<style lang="scss" scoped>
@import './styles/XtxSwiper.scss'
</style>